
<template>
  <div class="login-wrap">
    <el-image class="i" :src="require('@/assets/img/login-bg.jpg')"></el-image>
    <div class="ms-login">
      <div class="ms-title">后台管理系统</div>
      <el-form  ref="login" label-width="0px" class="ms-content">
        <el-form-item prop="username">
          <el-input v-model="eusername" placeholder="username">
            <template #prepend>
              <el-button icon="el-icon-user"></el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            placeholder="password"
            v-model="epassword">
            <template #prepend>
              <el-button icon="el-icon-lock"></el-button>
            </template>
          </el-input>
        </el-form-item>
        <input type="checkbox" checked>记住用户名密码
        <div class="login-btn">
          <el-button type="primary" @click="login()">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      eusername: localStorage.getItem('eusername'),
      epassword: localStorage.getItem('epassword')
    }
  },
  methods: {
    login () {
      this.$http.post('/login-check', {'eusername': this.eusername, 'epassword': this.epassword, 'eid': this.eid}).then(data => {
        console.log(data)
        this.$message.success('登录成功')
        if (data.code === 200) {
          sessionStorage.setItem('token', data.data.token)
          sessionStorage.setItem('principal', this.$qs.stringify(data.data.principal))

          localStorage.setItem('eusername', this.eusername)
          localStorage.setItem('epassword', this.epassword)
          localStorage.setItem('eusernames', data.data.eusername)
          localStorage.setItem('eid', data.data.eid)

          this.$store.commit('setToken', '123')
          this.$router.push({path: '/main'})
        } else if (data.code === 501) {
          this.$message.error(data.msg)
        }
      }).catch(error => {
        console.log(error)
        this.$message.error('登录失败')
      })
    }
  }
}
</script>

<style scoped>
@import '../assets/css/style.css';
.i{
  width: 100%;
  height: 100%;
  margin: -60px 0 0 0;
}
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: 100%;
}
.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-bottom: 1px solid #ddd;
}
.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  margin: -160px 0 0 -180px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.ms-content {
  padding: 30px 30px;
}
.login-btn {
  text-align: center;
}
.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}
</style>
